FLEX布局

Flexbox是一种现代的CSS布局模式，它可以使我们更轻松地布局和对齐内容。Flexbox通过使用容器和其内部的项目之间的关系来管理布局。在本教程中，我们将介绍Flexbox的基本概念以及如何使用它来布局Web页面的内容。关于FLEX布局详细的图文讲解，可以查看阮一峰老师的文档：直达链接

一、Flex容器

Flex容器是一个父元素，它包含了一组Flex项目。我们使用CSS的display属性来将一个元素设置为Flex容器。

例如，我们可以将一个div元素设置为Flex容器：

.container {
  display: flex;
}

默认情况下，Flex容器是沿主轴方向排列项目的。主轴是Flex容器的横向轴或纵向轴，具体取决于Flex容器的排列方向。我们可以使用flex-direction属性来指定Flex容器的主轴方向。例如，我们可以将Flex容器的主轴方向设置为从上到下（即纵向排列）：

.container {
  display: flex;
  flex-direction: column;
}

Flex容器有以下几个属性：

• justify-content：控制Flex项目在主轴方向上的对齐方式。它接受以下值：flex-start、flex-end、center、space-between、space-around和space-evenly。默认值为flex-start。
• align-items：控制Flex项目在交叉轴方向上的对齐方式。它接受以下值：flex-start、flex-end、center、baseline和stretch。默认值为stretch。
• align-content：控制多行Flex项目在交叉轴方向上的对齐方式。它接受以下值：flex-start、flex-end、center、space-between、space-around和stretch。默认值为stretch。

例如，我们可以将Flex项目在主轴方向上居中对齐，并在交叉轴方向上拉伸：

.container {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

二、Flex项目

Flex项目是Flex容器内的子元素。我们可以使用CSS的flex属性来指定Flex项目的属性。Flex项目有以下几个属性：

• flex-grow：控制Flex项目在主轴方向上的增长能力。它接受一个数字作为值，该数字表示Flex项目在可用空间中所占比例。默认值为0，表示Flex项目不会增长。
• flex-shrink：控制Flex项目在主轴方向上的收缩能力。它接受一个数字作为值，该数字表示Flex项目在空间不足时所占比例。默认值为1，表示Flex项目会缩小。
• flex-basis：定义Flex项目在主轴方向上的初始大小。它接受一个长度值作为值，默认值为auto。
• flex：是flex-grow，flex-shrink和flex-basis的简写属性。它的默认值为0 1 auto。
• align-self：定义Flex项目在交叉轴方向上的对齐方式。它接受与align-items属性相同的值。默认值为auto。

例如，我们可以将一个Flex项目设置为占用可用空间的一半，并且不会收缩：

.item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

三、完整示例

下面是一个简单的示例，展示了如何使用Flex容器和Flex项目布局页面：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  flex: 1;
  height: 50%;
  background-color: #ccc;
  border: 1px solid #000;
  text-align: center;
  font-size: 2em;
}

在这个例子中，我们将Flex容器设置为在主轴和交叉轴方向上都居中对齐。我们还将Flex项目设置为占用可用空间的相同比例，并设置了背景色、边框、文本对齐和字体大小。最终的效果是，Flex项目在Flex容器中居中对齐，并占用了Flex容器的一半高度。